import React, { useState, useEffect, useRef } from 'react';
import { useRequest, useModel } from 'umi';
import { Row, Divider, Card, Tabs, Descriptions, Image, message, Collapse, Radio,Space,Tooltip  } from 'antd';
import {
  getMonitoringDevicInfo,
  getEChartsOption,
  getMonitoringPhase,
} from '@/services/deviceLive';


import moment from 'moment';
import ECharts from 'echarts-for-react';

import styles from './index.less';
import AlarmTable from '@/pages/monitoring/deviceAlarm';
import DeviceRunState from '@/pages/monitoring/deviceRunState';

import slg from '@/assets/img/img/slg2.png';
import item1 from '@/assets/img/img/2item1-1.png';


import item3 from '@/assets/img/img/2item1-3-1.png';

import item4 from '@/assets/img/img/2item1-3-1.png';

import item6 from '@/assets/img/img/2item1-1.png';
import item5 from '@/assets/img/img/2item1-3-2.png';

import item41 from '@/assets/img/img/item4.png';
import item51 from '@/assets/img/img/item5.png';
import item61 from '@/assets/img/img/item6.png';
import item7 from '@/assets/img/img/item7.png';
import item8 from '@/assets/img/img/item8.png';
import item91 from '@/assets/img/img/item9-1.png';


const details: React.FC = (props: any) => {
  const { params } = props.match;

  const second = useRequest(
    () => {
      return getMonitoringPhase({ ...params, type: 3 });
    },
    {
      pollingInterval: 3000,
      pollingWhenHidden: false,
    },
  );

  const [deviceInfo, setDeviceInfo] = useState<API.DeviceItem>({});
  const [runningData, setRunningData] = useState({});
  

  const [chartIndex, setChartIndex] = useState(4);

  const [onLineBackgroundColor, setOnLineBackgroundColor] = useState('#8ca1aa');




  const { initialState, setInitialState } = useModel('@@initialState');
  const { mySocket } = initialState || {};

 
  if (mySocket&&mySocket.ws.readyState==1) {
    mySocket.send(params.id);
    mySocket.onmessage = async function (e) {
      // console.log(`onmessage: ${e.data}`);
      //排除心跳数据
      if ('heartbeat' != e.data && e.data.indexOf('RunningData') != -1) {
        onMessage(e);
      } else if ('heartbeat' != e.data && e.data.indexOf('AlarmData') != -1) {
        const data = JSON.parse(e.data);
        await setInitialState((s) => ({ ...s, alarmNotices: data.AlarmData }));
      }
    };
  }

  const onMessage = (e: any) => {
    const message = JSON.parse(e.data);
    // const runningData = {...message.RunningData, ...message.ReliabilityData}
    const rData = message.RunningData || {};
    console.log(rData)
    if (rData.deviceId != params.id) {
      return;
    }
    rData.acquisitionTime = moment().format('YYYY-MM-DD HH:mm:ss');
    if (runningData?.online == 0 && rData?.online == 1) {
      go();
    }
    if (runningData?.alarm == 0 && rData?.alarm == 1) {
      go1();
    }

    setRunningData(rData);
  };

  useEffect(() => {
    const setSelectData = async () => {
      var details = await getMonitoringDevicInfo(params);
      setRunningData(details.runningData);
      setDeviceInfo(details.deviceInfo);
      if (details?.runningData?.online == 1) {
        await go();
      }
      if (details?.runningData?.trip == 1) {
        await go1();
      }
    };
   setSelectData();
   
  }, []);

  const sleep = (t) => {
    return new Promise((res, rej) => {
      setTimeout(res, t);
    });
  };

  async function go() {
    setOnLineBackgroundColor('yellow');
    await sleep(200);
    setOnLineBackgroundColor('#19377f');
    await sleep(200);
    go();
  }


  function getJingDu() {
    let a = runningData?.closedLoopFeedback;
    let b = runningData?.closedLoopSetting;
    let c = (a / b) * 100;

    return c.toFixed(2);
  }

  let option = {

    radar: {

      indicator: [
        { name: '电压', max: 6500 },
        { name: '频率', max: 16000 },
        { name: '功率因数', max: 30000 },
      ],
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [
              runningData?.voltage || 0,
              runningData?.gridFrequency || 0,
              runningData?.powerFactor || 0,
            ],
          },
        ],
      },
    ],
  };

  const option2 = {
    color: ['#40a9ff'],
    grid: {
      top: 50,
      left: 60,
      right: 50,
      bottom: 30,
    },
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      // data: [second.data?.series[0].name, second.data?.series[1].name, second.data?.series[2].name],
      textStyle: {
        color: '#ddd',
      },
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: 'category',

      data: second.data?.phaseTime,
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd', //左边线的颜色
        },
      },
    },
    yAxis: {
      type: 'value',
      scale: true,
      min: second?.data?.data1[0]?.data[0], //取0为最小刻度
      axisLabel: {
        formatter: '{value}',
      },
      minInterval: 1,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd', //左边线的颜色
        },
      },
    },
    series: second.data?.data1,
  };
  const option3 = {
    color: ['#40a9ff'],
    grid: {
      top: 50,
      left: 60,
      right: 50,
      bottom: 30,
    },
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      // data: [second.data?.series[0].name, second.data?.series[1].name, second.data?.series[2].name],
      textStyle: {
        color: '#ddd',
      },
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: 'category',

      data: second.data?.phaseTime,
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd', //左边线的颜色
        },
      },
    },
    yAxis: {
      type: 'value',
      scale: true,
      min: 0, //取0为最小刻度
      axisLabel: {
        formatter: '{value}',
      },
      minInterval: 1,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd', //左边线的颜色
        },
      },
    },
    series: second.data?.data,
  };

 

  // JSX 语法
  const el = (
    <>
      {' '}
      <div className={styles.flexBetween} style={{ marginRight: '10px', alignItems: 'end' }}>
        <div
          className={styles.flexBetween}
          style={{ flex: 5, alignItems: 'end', minWidth: '650px', width: 'auto' }}
        >
          <div style={{ flex: 1 }}>
            <div className={styles.flex}>
              <Image src={slg} preview={false} />
              <div className={styles.deviceInfo}>
                <div>
                  <span className={styles.title}> {deviceInfo?.deviceName || '--'} </span>
                  <span className={styles.updateTimeText}>
                    {' '}
                    (最新同步时间：{runningData?.acquisitionTime || '--'})
                  </span>
                </div>
                <div className={styles.flexBetween}>
                  <div>
                    <span>设备位号：{deviceInfo?.deviceNo || '--'} </span>
                    <span>
                      &nbsp; 安装位置：{deviceInfo?.areaName || '--'}
                      {deviceInfo?.devicePosition}
                    </span>
                  </div>
                  <div>最新维保日期:{deviceInfo?.latestMaintenanceTime||'--'}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          className={styles.flexBetween}
          style={{ flex: 3, justifyContent: 'end', marginLeft: '50px' }}
        >
          <div className={[styles.flexBetween, styles.stateR].join(' ')}>
            <div>
              <div
                className={
                  runningData?.close == 1 ? [styles.yuan, styles.bgGreen].join(' ') : styles.yuan
                }
              ></div>
              <span>合闸</span>
            </div>
            <div>
              <div
                className={
                  runningData?.trip == 1 ? [styles.yuan, styles.bgRed].join(' ') : styles.yuan
                }
              ></div>
              <span>故障</span>
            </div>
            <div>
              <div
                className={
                  runningData?.online == 1 ? [styles.yuan, styles.bgYellow].join(' ') : styles.yuan
                }
                style={{ backgroundColor: onLineBackgroundColor }}
              ></div>
              <span>通讯</span>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.flexBetween} style={{ margin: '12px 0 30px 0', alignItems: 'start' }}>
        <div style={{ flex: 5 }}>
          <div className={styles.flex}>
            <div className={styles.dataItem} style={{ marginLeft: '0px' }}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item1} preview={false} />{' '}
                <span className={styles.topRight}>设定频率{runningData?.gridFrequency==null?'--':runningData?.gridFrequency}Hz</span>
              </div>

              <div
                style={{ margin: '0 0 -2px 10px', color: 'rgb(64 255 255)', marginTop: '-3px' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>P</span>
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>{runningData?.totalActiveEnergy==null?'--':runningData?.totalActiveEnergy}</span>千瓦时
                </div>
              </div>
              <div className={styles.attribute}>总有功电量</div>
            </div>
            <div className={styles.dataItem}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item3} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div className={styles.middleValue}>
                <span className={styles.data}>{runningData?.activePower==null?'--':runningData?.activePower}</span>
                <span className={styles.unit}>瓦</span>
              </div>
              <div className={styles.attribute}>有功功率</div>
            </div>

            <div className={styles.dataItem}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item3} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div className={styles.middleValue}>
                <span className={styles.data}>{runningData?.powerFactor==null?'--':runningData?.powerFactor}</span>
                <span className={styles.unit}>%</span>
              </div>
              <div className={styles.attribute}>功率因数cos</div>
            </div>
          </div>
          <div className={styles.flex}>
            <div className={styles.dataItem} style={{ marginLeft: '0px' }}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item4} preview={false} />{' '}
                <span className={styles.topRight}>设定频率{runningData?.gridFrequency==null?'--':runningData?.powerFactor}Hz</span>
              </div>

              <div
                style={{ margin: '0 0 -2px 10px', color: 'rgb(64 255 255)', marginTop: '-3px' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>U</span>
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>{runningData?.voltage==null?'--':runningData?.powerFactor}</span>V
                </div>
              </div>
              <div className={styles.attribute}>电压</div>
            </div>
            <div className={styles.dataItem}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item5} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div className={styles.middleValue}>
                <span className={styles.data}>{runningData?.current==null?'--':runningData?.powerFactor}</span>
                <span className={styles.unit}>A</span>
              </div>
              <div className={styles.attribute}>电流</div>
            </div>

            <div className={styles.dataItem}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item6} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div className={styles.middleValue}>
                <span className={styles.data}>{runningData?.gridFrequency==null?'--':runningData?.powerFactor}</span>
                <span className={styles.unit}>Hz</span>
              </div>
              <div className={styles.attribute}>频率</div>
            </div>
          </div>
        </div>
        <div style={{ flex: 3 }} className={styles.alarmBox}>
          <span>电能健康分析</span>
          <ECharts option={option} style={{ height: '250px', width: '285px', margin: 'auto' }} />
        </div>
      </div>
    </>
  );

  const el2 = (
    <>
      {' '}
      <div className={styles.flexBetween} style={{ marginRight: '10px', alignItems: 'end' }}>
        <div className={styles.flexBetween} style={{ flex: 5, alignItems: 'end' }}>
          <div style={{ flex: 1 }}>
            <div className={styles.flex}>
              <Image src={slg} preview={false} />
              <div className={styles.deviceInfo}>
                <div>
                  <span className={styles.title}> {deviceInfo?.deviceName || '--'} </span>
                  <span className={styles.updateTimeText}>
                    {' '}
                    (最新同步时间：{runningData?.acquisitionTime || '--'})
                  </span>
                </div>
                <div className={styles.flexBetween}>
                  <div>
                    <span>设备位号：{deviceInfo?.deviceNo || '--'} </span>
                    <span>
                      &nbsp; 安装位置：{deviceInfo?.areaName || '--'}
                      {deviceInfo?.devicePosition}
                    </span>
                  </div>
                  <div>最新维保日期:{deviceInfo?.latestMaintenanceTime||'--'}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.flexBetween} style={{ marginLeft: '50px' }}>
          <div>
            <div
              className={
                runningData?.online == 1 ? [styles.yuan, styles.bgYellow].join(' ') : styles.yuan
              }
              style={{ backgroundColor: onLineBackgroundColor }}
            ></div>
            <span>通讯</span>
          </div>
        </div>
      </div>

 
      <div className={styles.flex} >
        <div className={styles.dataItem} style={{ height: '183px', marginLeft: 0 }}>
          <div className={styles.flexBetween}>
            <Image width={20} height={20} src={item1} preview={false} />{' '}
            <span className={styles.topRight}></span>
          </div>
          <div>
            <div
             
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>W</span>
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.totalActiveEnergy==null?'--':runningData?.totalActiveEnergy}</span>Kwh
              </div>
            </div>
            <div className={styles.flexcenter}>
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.totalActiveEnergy1==null?'--':runningData?.totalActiveEnergy1}</span>
                <span  className={styles.attr}><span className={styles.nameItalic1}>W</span>1</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.totalActiveEnergy2==null?'--':runningData?.totalActiveEnergy2}</span>
                <span className={styles.attr}><span className={styles.nameItalic1}>W</span>2</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.totalActiveEnergy3 ==null?'--':runningData?.totalActiveEnergy3}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>W</span>3</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.totalActiveEnergy4 ==null?'--':runningData?.totalActiveEnergy4}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>W</span>4</span>
              </div>
            </div>
          </div>
          <div className={styles.attribute}>总有功电能</div>
        </div>
        <div className={styles.dataItem} style={{ height: '183px' }}>
          <div className={styles.flexBetween}>
            <Image width={20} height={20} src={item1} preview={false} />{' '}
            <span className={styles.topRight}></span>
          </div>
          <div>
            <div
             
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>Wp</span>
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.positiveActiveEnergy==null?'--':runningData?.positiveActiveEnergy}</span>Kwh
              </div>
            </div>
            <div className={styles.flexcenter}>
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.positiveActiveEnergy1==null?'--':runningData?.positiveActiveEnergy1}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wp</span>1</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.positiveActiveEnergy2 ==null?'--':runningData?.positiveActiveEnergy2}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wp</span>2</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.positiveActiveEnergy3 ==null?'--':runningData?.positiveActiveEnergy3}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wp</span>3</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.positiveActiveEnergy4 ==null?'--':runningData?.positiveActiveEnergy4}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wp</span>4</span>
              </div>
            </div>
          </div>
          <div className={styles.attribute}>正向有功电能</div>
        </div>
        <div className={styles.dataItem} style={{ height: '183px' }}>
          <div className={styles.flexBetween}>
            <Image width={20} height={20} src={item1} preview={false} />{' '}
            <span className={styles.topRight}></span>
          </div>
          <div>
            <div
        
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>Wn</span>
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.negativeActiveEnergy==null?'--':runningData?.negativeActiveEnergy}</span>Kwh
              </div>
            </div>
            <div className={styles.flexcenter}>
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.negativeActiveEnergy1 ==null?'--':runningData?.negativeActiveEnergy1}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wn</span>1</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.negativeActiveEnergy2==null?'--':runningData?.negativeActiveEnergy2}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wn</span>2</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.negativeActiveEnergy3 ==null?'--':runningData?.negativeActiveEnergy3}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wn</span>3</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.negativeActiveEnergy4 ==null?'--':runningData?.negativeActiveEnergy4}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wn</span>4</span>
              </div>
            </div>
          </div>
          <div className={styles.attribute}>反向有功电能</div>
        </div>
        <div className={styles.dataItem} style={{ height: '183px' }}>
          <div className={styles.flexBetween}>
            <Image width={20} height={20} src={item1} preview={false} />{' '}
            <span className={styles.topRight}></span>
          </div>
          <div>
            <div
             
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>Wr</span>
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.reactiveEnergy==null?'--':runningData?.reactiveEnergy}</span>Kvarh
              </div>
            </div>
            <div className={styles.flexcenter}>
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.reactiveEnergy1 ==null?'--':runningData?.reactiveEnergy1}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wr</span>1</span>
              </div> 
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.reactiveEnergy2 ==null?'--':runningData?.reactiveEnergy2}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wr</span>2</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.reactiveEnergy3 ==null?'--':runningData?.reactiveEnergy3}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wr</span>3</span>
              </div>
              <Divider type="vertical" />
              <div className={styles.flexColumn}>
                <span className={styles.data2}>{runningData?.reactiveEnergy4 ==null?'--':runningData?.reactiveEnergy4}</span>
                <span className={styles.attr} ><span className={styles.nameItalic1}>Wr</span>4</span>
              </div>
            </div>
            <div className={styles.attribute}>无功电能</div>
          </div>
        </div>
        <div className={styles.dataItem} style={{ height: '183px' }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item41} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div className={styles.middleValue} style={{    height: '123px',lineHeight: '123px'}}>
              <span className={styles.data}>{runningData?.zeroLineCurrent==null?'--':runningData?.zeroLineCurrent}</span>
              <span className={styles.unit}>A</span>
            </div>
            <div className={styles.attribute}>零线电流</div>
          </div>
      </div>
        <div className={styles.flex}>
         
        <div className={styles.dataItem} style={{marginLeft:0,  height: '183px' }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item91} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div>
              <div
            
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>PFs</span>
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>{runningData?.powerFactor==null?'--':runningData?.powerFactor}</span>%
                </div>
              </div>
              <div className={styles.flexcenter}>
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phaseaPowerFactor ==null?'--':runningData?.phaseaPowerFactor}
                  
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>PFs</span>a</span>
                 
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phasebPowerFactor ==null?'--':runningData?.phasebPowerFactor}
                  
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>PFs</span>b</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phasecPowerFactor ==null?'--':runningData?.phasecPowerFactor}
                  
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>PFs</span>c</span>
                </div>
              </div>
            </div>
            <div className={styles.attribute}>功率因数</div>
          </div>




          <div className={styles.dataItem} style={{ height: '183px', }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item41} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div>
              <div
              
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>Ps</span>
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>
                    {runningData?.activePower ==null?'--':runningData?.activePower}
                  </span>
                  kW
                </div>
              </div>
              <div className={styles.flexcenter}>
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phaseaActivePower ==null?'--':runningData?.phaseaActivePower}
                   
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>Ps</span>a</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phasebActivePower==null?'--':runningData?.phasebActivePower}
                   
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>Ps</span>b</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phasecActivePower ==null?'--':runningData?.phasecActivePower}
                   
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>Ps</span>c</span>
                </div>
              </div>
            </div>
            <div className={styles.attribute}>有功功率</div>
          </div>
          <div className={styles.dataItem} style={{ height: '183px' }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item51} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div>
              <div
            
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>Qs</span>
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>{runningData?.reactivePower==null?'--':runningData?.reactivePower}</span>
                  Kvar
                </div>
              </div>
              <div className={styles.flexcenter}>
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phaseaReactivePower ==null?'--':runningData?.phaseaReactivePower}
                  
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>Qs</span>a</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phasebReactivePower ==null?'--':runningData?.phasebReactivePower}
                  
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>Qs</span>b</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phasecReactivePower==null?'--':runningData?.phasecReactivePower}
                  
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>Qs</span>c</span>
                </div>
              </div>
            </div>
            <div className={styles.attribute}>无功功率</div>
          </div>
          <div className={styles.dataItem} style={{ height: '183px' }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item61} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div>
              <div
             
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>Ss</span>
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>{runningData?.apparentPower==null?'--':runningData?.apparentPower}</span>KVA
                </div>
              </div>
              <div className={styles.flexcenter}>
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phaseaApparentPower ==null?'--':runningData?.phaseaApparentPower}
                  
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>Ss</span>a</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phasebApparentPower ==null?'--':runningData?.phasebApparentPower}
                 
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>Ss</span>b</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>
                    {runningData?.phasecApparentPower ==null?'--':runningData?.phasecApparentPower}
                   
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>Ss</span>c</span>
                </div>
              </div>
            </div>
            <div className={styles.attribute}>视在功率</div>
          </div>
      

          <div className={styles.dataItem} style={{height: '183px' }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item41} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div className={styles.middleValue} style={{    height: '123px',lineHeight: '123px'}}>
              <span className={styles.data}>{runningData?.gridFrequency==null?'--':runningData?.gridFrequency}</span>
              <span className={styles.unit}>Hz</span>
            </div>
            <div className={styles.attribute}>电网频率</div>
          </div>
        </div>
        <div className={styles.flex} style={{marginBottom:'25px'}}>
       
          <div className={styles.dataItem} style={{ marginLeft: 0, height: '138px' }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item8} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div>
              <div className={styles.flexcenter1}>
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>{runningData?.phaseaVoltage ==null?'--':runningData?.phaseaVoltage}<span  className={styles.unit1}>V</span>
                  </span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>U</span>a</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>{runningData?.phasebVoltage==null?'--':runningData?.phasebVoltage}<span  className={styles.unit1}>V</span></span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>U</span>b</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>{runningData?.phasecVoltage ==null?'--':runningData?.phasecVoltage}<span  className={styles.unit1}>V</span></span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>U</span>c</span>
                </div>
              </div>
            </div>
            <div className={styles.attribute}>三相电压</div>
          </div>
          <div className={styles.dataItem} style={{ height: '138px' }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item8} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div>
              <div className={styles.flexcenter1}>
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>{runningData?.uabLineVoltage==null?'--':runningData?.uabLineVoltage}<span  className={styles.unit1}>V</span></span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>U</span>ab</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>{runningData?.ubcLineVoltage ==null?'--':runningData?.ubcLineVoltage}<span  className={styles.unit1}>V</span></span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>U</span>bc</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>{runningData?.ucaLineVoltage ==null?'--':runningData?.ucaLineVoltage}<span  className={styles.unit1}>V</span></span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>U</span>ac</span>
                </div>
              </div>
            </div>
            <div className={styles.attribute}>线电压</div>
          </div>
          <div className={styles.dataItem} style={{ height: '138px' }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item7} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div>
              <div className={styles.flexcenter1}>
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>{runningData?.phaseaCurrent==null?'--':runningData?.phaseaCurrent}<span  className={styles.unit1}>A</span></span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>I</span>a</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>{runningData?.phasebCurrent==null?'--':runningData?.phasebCurrent}<span  className={styles.unit1}>A</span></span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>I</span>b</span>
                </div>
                <Divider type="vertical" />
                <div className={styles.flexColumn}>
                  <span className={styles.data2}>{runningData?.phasecCurrent ==null?'--':runningData?.phasecCurrent}<span  className={styles.unit1}>A</span></span>
                  <span className={styles.attr} ><span className={styles.nameItalic1}>I</span>c</span>
                </div>
              </div>
            </div>
            <div className={styles.attribute}>三相电流</div>
          </div>
          <div style={{flex:1, padding:'12px', margin: '5px 6px'}} ></div>
          <div style={{flex:1, padding:'12px', margin: '5px 6px'}} ></div>
          </div>
    </>
  );
  return (
    <div className={styles.main} key={1}>
      { el2 }
     
      <Row key={6}>
        <div className={styles.tabsTitle}>
          <a
            className={chartIndex != 4 ? styles.a1 : [styles.a1, styles.tabcheck1].join(' ')}
            onClick={() => setChartIndex(4)}
          >
            运行状态
          </a>
          <div
            className={
              chartIndex != 4 ? styles.a1after : [styles.a1after, styles.a1afterCheck].join(' ')
            }
          ></div>
            <a
            className={chartIndex != 1 ? styles.a2 : [styles.a2, styles.tabcheck].join(' ')}
            onClick={() => setChartIndex(1)}
          >
            {' '}
            有功电量趋势分析
          </a>
          <a
            className={chartIndex != 2 ? styles.a2 : [styles.a2, styles.tabcheck].join(' ')}
            onClick={() => setChartIndex(2)}
          >
            {' '}
            电流趋势分析
          </a>
          <a
            className={chartIndex != 3 ? styles.a3 : [styles.a3, styles.tabcheck].join(' ')}
            onClick={() => setChartIndex(3)}
          >
            {' '}
            报警记录
          </a>
        </div>
        <Card className={styles.modalItem} title={null} style={{ width: '100%' }}>
          <ECharts style={{ display: chartIndex == 1 ? 'block' : 'none' }} option={option2} />
          <ECharts style={{ display: chartIndex == 2 ? 'block' : 'none' }} option={option3} />
          <AlarmTable deviceId={params.id} display={chartIndex==3?'block':'none'}></AlarmTable>
          <DeviceRunState   deviceId={params.id}  display={chartIndex==4?'block':'none'}></DeviceRunState>
        </Card>
      </Row>
     
    </div>
  );
};

export default details;
